<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-input v-model="title" placeholder="请输入文章标题">
          <template #prepend>标题</template>
        </el-input>
      </div>
    </template>
    <el-row>
      <el-col :span="24">
        <Uedit v-model="body"></Uedit>
      </el-col>
      <el-col :span="24" style="margin-top:10px">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>预览效果</span>
            </div>
          </template>
<!--          内容-->
          <div v-html="body" id="content"></div>
        </el-card>
        <el-button @click="uploadArticle" style="margin-left: 90%; margin-top: 20px" type="primary">发表</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import request from '@/utils/request'
import Uedit from "../components/Uedit.vue";
import ElMessage from "element-plus";
import {getToken} from "@/utils/auth";
import router from "@/router";
import {getUserInfo} from "@/utils/owninfo";
// import ElMessage from "element-plus";
export default {
  props: ["pc"],
  components: {
    Uedit,
    ElMessage,
  },
  data() {
    return {
      body: "",
      title:"",
    };
  },
  created() {
    this.validateLogin()
  },
  methods: {
    uploadArticle(){
      request({
        url: '/article/insertarticle',
        method: 'post',
        data:{
          title: this.title,
          body: this.body,
          userid: getUserInfo(),
        }
      }).then(response => {
        console.info(response.code)
        this.$message.success('发表成功');
        router.push("/")
      }).catch(error => {
        console.info("发表失败")
        this.$message.error('发表失败');
      })
    },
    validateLogin() {
      console.info("验证登录")
      console.info(getToken())
      if(getToken() === null || getToken() === undefined || getToken() === "undefined"){
        console.info('去登陆')
        router.push("/login");
      }
    }
  }
};
</script>
<style scoped>
#content {
  width: 100%;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}
</style>
